<template>
  <el-dialog title="审批流编辑" :visible.sync="lineData.apShow"  @open="apDialogOpen" @close="apDialogClose" width="60%">
    <el-dialog :title="approveMap[curApStat]" :visible.sync="appCellShow" width="50%" append-to-body>
      <el-form :rules="rules" ref="dataForm" :model="cellTemp" label-position="left" label-width="150px">
        <el-form-item label="节点名称" prop="node_name">
          <el-input v-model="cellTemp.node_name"></el-input>
        </el-form-item>
        <el-form-item label="审批人" prop="user_id">
          <el-select v-model="cellTemp.user_id" placeholder="请选择审批人">
            <el-option v-for="(item,index) in userList" :key="index" :label="item.name" :value="item.id"  />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="appCellShow = false">取消</el-button>
        <el-button v-if="curApStat=='add'" type="primary" @click="cellSubmit">确定</el-button>
        <el-button v-else type="primary" @click="cellUpdate">修改</el-button>
      </div>
    </el-dialog>
    <div class="app-line-container">
      <el-timeline v-loading="dialogLoading">
        <el-timeline-item
          class="line-item"
          v-for="(activity, index) in activities"
          :key="index">
          <div slot="dot" class="item-dot">
            <div class="line-title" @click="editApproveUser(index)">
              <el-tag :type="activity.color_style" size="mini"><i :class="activity.icon" /></el-tag>
              <span v-if="activity.type=='process'" style="display: block;margin-left: 10px">{{activity.node_name}}({{activity.user_name}})</span>
              <span v-else style="display: block;margin-left: 10px">{{activity.user_name}}</span>
            </div>
            <el-tooltip content="新增审批人">
              <i class="el-icon-circle-plus btn-add" v-if="activity.type=='begin'" @click="addApproveUer"/>
            </el-tooltip>
            <div class="line-btn-group" v-if="activity.type=='process'">
              <i class="el-icon-delete-solid btn-del" @click="approveDel(index)" v-if="activities.length>2" />
              <i class="el-icon-top btn-up" v-if="index>1" @click="approveMoveUp(index)"/>
              <i class="el-icon-bottom btn-down" v-if="index<activities.length-2" @click="approveMoveDown(index)" />
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="lineData.apShow = false">取消</el-button>
      <el-button type="primary" @click="apSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import moduleApi from "@/api/module"
  import userApi from "@/api/user";
  import {resetTemp} from "@/utils"
  const beginTag={
    user_name: '审批开始',
    node_name:'',
    type:'begin',
    color_style: 'success',
    icon: 'el-icon-s-check'
  }
  const endTag={
    user_name: '审批结束',
    node_name:'',
    type:'end',
    color_style: 'danger',
    icon: 'el-icon-s-flag'
  }

  export default {
    name: "approve-line",
    props:{
      lineData:{
        type:Object,
        required:true
      }
    },
    data(){
      return {
        rules:{
          user_id:[{ required: true, message: '必填', trigger: 'blur' }],
          node_name:[{ required: true, message: '必填', trigger: 'blur' }]
        },
        dialogLoading:false,
        appCellShow:false,
        cellTemp:{
          idx:null,
          user_id:null,
          user_name:null,
          node_name:null,
          step:null,
        },
        lineTemp:{
          module_name:null,
          orgnization_id:null,
          values:null
        },
        curApStat:'',
        approveMap:{
          add:'添加流程节点',
          update:'修改流程节点'
        },
        activities: [],
        userList:[]
      }
    },
    methods:{
      addApproveUer(){
        this.curApStat='add'
        resetTemp(this.cellTemp)
        this.appCellShow=true
      },
      editApproveUser(idx){
        const actApprov = this.activities[idx]
        if (actApprov.type=='begin'){
          this.addApproveUer()
          return
        }
        this.curApStat='update'
        this.cellTemp = Object.assign({}, actApprov)
        this.cellTemp.idx=idx
        this.appCellShow=true
      },
      approveDel(idx){
        this.activities.splice(idx, 1)
      },
      approveMoveUp(idx){
        const actObj = this.activities[idx]
        this.activities.splice(idx, 1)
        this.activities.splice(idx-1, 0, actObj)
      },
      approveMoveDown(idx){
        const actObj = this.activities[idx]
        this.activities.splice(idx, 1)
        this.activities.splice(idx+1, 0, actObj)
      },
      apDialogOpen(){
        this.dialogLoading=true
        this.lineTemp = Object.assign({},this.lineData)
        moduleApi.rptFlowDetail(this.lineTemp).then(res=>{
          let actArr = []
          const oriApv = res.data
          oriApv.forEach(apv=>actArr.push({
            user_id:apv.user_id,
            user_name:apv.user_name,
            node_name:apv.node_name,
            type:'process',
            color_style: 'info',
            icon: 'el-icon-s-custom',
            step:apv.step
          }))
          actArr.splice(0,0,beginTag)
          actArr.push(endTag)
          this.activities = actArr
          this.dialogLoading=false
        }).catch(err=>{
          this.dialogLoading=false
        })
        userApi.orgnizeUsers(this.lineTemp.orgnization_id).then(res => {
          this.userList = res.data
        })
      },
      apDialogClose(){
        this.activities=[beginTag,endTag]
      },
      apSubmit(){
        let rqUserArr = Object.assign([], this.activities)
        rqUserArr = rqUserArr.slice(1, rqUserArr.length-1)
        if (!rqUserArr.length){
          this.$confirm(`您确定要删除该审批流程吗？`, '提示', confirm).then(() => {
            moduleApi.rptFlowDestroy(this.lineTemp).then(() => {
              this.$message({ type: 'success', message: '删除审批流程成功' })
              this.lineData.apShow=false
            })
          }).catch(() => {
            this.$message({ type: 'info', message: '已取消删除' })
          })
          return
        }
        for (let idx in rqUserArr){
          rqUserArr[idx].step = idx
        }
        this.lineTemp.values = JSON.stringify(rqUserArr)
        moduleApi.rptFlowStore(this.lineTemp).then(res=>{
          this.$message.success("流程编辑成功")
          this.lineData.apShow=false
        })
      },

      cellSubmit(){
        const user = this.userList.find(u=>u.id==this.cellTemp.user_id)
        this.cellTemp.user_name=user.name
        let apUser = {
          user_id:this.cellTemp.user_id,
          user_name:this.cellTemp.user_name,
          node_name:this.cellTemp.node_name,
          type:'process',
          color_style: 'info',
          icon: 'el-icon-s-custom',
          step:0
        }
        this.activities.splice(this.activities.length-1,0, apUser)
        this.appCellShow=false
      },
      cellUpdate(){
        const user = this.userList.find(u=>u.id==this.cellTemp.user_id)
        this.cellTemp.user_name=user.name
        let apUser = {
          user_id:this.cellTemp.user_id,
          user_name:this.cellTemp.user_name,
          node_name:this.cellTemp.node_name,
          type:'process',
          color_style: 'info',
          icon: 'el-icon-s-custom',
          step:0
        }
        this.activities.splice(this.cellTemp.idx,1, apUser)
        this.appCellShow=false
      }
    }
  }
</script>

<style lang="scss">
.app-line-container{
  padding: 5px;
  width: 100%;

  .line-item{
    width: 100%;
    height: 50px;

    .item-dot{
      display: flex;
      justify-content: space-between;
      align-items: center;

      .line-title{
        display: flex;
        flex-direction: row;
        cursor: pointer;
      }
      .btn-add{
        cursor: pointer;
        color: #3a8ee6;
        margin-left: 30px;
      }
      .line-btn-group{
        margin-left: 30px;

        .btn-del,.btn-up ,.btn-down{
          cursor: pointer;
          color: #3a8ee6;
          margin-left: 10px;
        }
      }

    }

  }

}
</style>
